<!DOCTYPE html>
<html>
<head>
    <title>Fig 6.15</title>
</head>
<body>
    <canvas id="canvas" width="450" height="350"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Style settings to emulate the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round'; // Gives a slightly softer, more "drawn" feel to line ends

        // Define coordinate system parameters
        const originX = 80;
        const originY = 250;
        const axisXLen = 300;
        const axisYLen = 180;
        const arrowSize = 12;

        // Coordinates for key points on the graph
        const tauX = originX + 200;
        const epsilon0Y = originY - 130;

        // --- Drawing ---

        // Draw X and Y axes
        ctx.beginPath();
        // Y-axis
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - axisYLen);
        // X-axis
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX + axisXLen, originY);
        ctx.stroke();

        // Draw arrowheads for the axes
        function drawArrowhead(ctx, fromX, fromY, toX, toY, size) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - size * Math.cos(angle - Math.PI / 6), toY - size * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - size * Math.cos(angle + Math.PI / 6), toY - size * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        // Y-axis arrow (pointing up)
        drawArrowhead(ctx, originX, originY, originX, originY - axisYLen, arrowSize);
        // X-axis arrow (pointing right)
        drawArrowhead(ctx, originX, originY, originX + axisXLen, originY, arrowSize);

        // Draw the rectangular pulse function
        ctx.beginPath();
        // Vertical line at t=0
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, epsilon0Y);
        // Horizontal line from t=0 to t=τ
        ctx.lineTo(tauX, epsilon0Y);
        // Vertical line down at t=τ
        ctx.lineTo(tauX, originY);
        ctx.stroke();

        // --- Labeling ---

        // Set common text alignment for labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Label for the vertical axis: ε_x(t)
        ctx.font = '24px "Times New Roman"';
        ctx.fillText('ε', originX + 8, originY - axisYLen - 22);
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('x', originX + 18, originY - axisYLen - 17);
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('(t)', originX + 36, originY - axisYLen - 22);

        // Label for the pulse height: ε_0
        ctx.textAlign = 'right';
        ctx.font = '24px "Times New Roman"';
        ctx.fillText('ε', originX - 15, epsilon0Y);
        ctx.font = '16px "Times New Roman"';
        ctx.fillText('0', originX - 5, epsilon0Y + 7);

        // Label for the origin: 0
        ctx.font = '24px "Times New Roman"';
        ctx.fillText('0', originX - 20, originY + 5);

        // Label for the pulse duration: τ
        ctx.textAlign = 'center';
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('τ', tauX, originY + 20);

        // Label for the horizontal axis: t
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('t', originX + axisXLen + 20, originY);

        // Figure caption
        ctx.font = 'bold 20px "Times New Roman"';
        ctx.fillText('Fig. 6.15', canvas.width / 2, originY + 60);

    </script>
</body>
</html>